<template>
	<div id="disk" style="cursor:default;" onselectstart="return false">
		<div style="width: 100%;height: 10vh;">
			<div style="height: 30px;width: 100%;">
				<div style="display: flex;justify-content:space-between;">
					<Row type="flex" justify="start" class="code-row-bg" style="float: left;padding-right: 5px; height: 40px;line-height: 60px;">
						<div style="float:left; margin-left:10px; line-height: 40px;">
							<h1>{{filetxt}}</h1>
							<Button size="small" icon="ios-add-circle" @click="NewFolder = true">新建</Button>
							<Modal title="新建文件夹" v-model="NewFolder" @on-ok="YesFolder">
								<Input v-model="FolderValue" placeholder="请输入新建文件夹的名称……" style="width: 100%;" />
							</Modal>
						</div>
					</Row>
					<div style="display: flex;align-items: center;">
						<div style="height: 40px;">
							<!-- <i-switch size="small" style="margin-top: 12px;float: right;margin-right: 10px;" /> -->
							<Input suffix="ios-search" size="small" placeholder="搜索" style="margin-top: 7px; width: auto; float: right; margin-right: 10px;" />
						</div>
					</div>
				</div>
			</div>
			<div style="width: 100%;height: 30px;background: #000099;">
				<div style="height: 50px; background-color: #FFFFFF;">
					<Row type="flex" justify="start" class="code-row-bg" style="">
						<div style="height: 40px; line-height: 40px; margin-left: 10px;">
							<a style="color: #3f3f3f;" @click="Back">
								<Icon type="ios-arrow-back" size="20" />
							</a>
							<!-- 返回上一层 -->
							<a style="margin-left: 5px;" @click="Refresh">
								<Icon type="md-refresh" color="#3f3f3f" size="20" />
							</a>

							<Divider type="vertical" size="default" />
						</div>
						<Breadcrumb>
							<a style="height: 50px; line-height: 50px;color: #3f3f3f;" @click="aaaaa(index)" v-for="(item,index) in path">
								<BreadcrumbItem>
									<Icon type="ios-home-outline"></Icon>
									{{item}}
								</BreadcrumbItem>
							</a>
						</Breadcrumb>
					</Row>
				</div>
			</div>
		</div>
		<ul v-for="(item,index) in list" style="float: left;margin: 5px;" @contextmenu="showMenu(index)">
			<vue-context-menu :contextMenuData="contextMenuData" @deleted="deleted" @NewFile="NewFile"></vue-context-menu>
			<div id="div" @dblclick="dbClick(item)">
				<img src="../../assets/icon/6.png" width="60px" height="60px" />
				<h5>{{item}}</h5>
			</div>
		</ul>
	</div>
</template>

<script>
	import {
		exec
	} from "child_process";
	export default {
		data() {
			return {
				list: [],
				path: [], //面包屑路径
				contextIndex: '',
				NewFolder: false,
				FolderValue: '',
				txtvalue: [],
				filetxt: '',
				contextMenuData: {
					menuName: 'demo',
					//菜单显示的位置
					axis: {
						x: null,
						y: null
					},
					//菜单选项
					menulists: [{
						fnHandler: 'deleted', //绑定事件
						btnName: '删除', //菜单名称
					}, {
						fnHandler: 'NewFile',
						btnName: '重命名'
					}]
				}
			}
		},
		mounted() {
			this.Refresh()
		},
		methods: {
			Refresh() {
				const fs = require('fs')
				const _this = this

				var path = '/' + this.path.join("/");
				var readDir = fs.readdirSync(path);
				_this.list = readDir
				console.log(readDir)
			},
			showMenu(index) {
				event.preventDefault()
				var x = event.clientX
				var y = event.clientY
				// Get the current location
				this.contextMenuData.axis = {
					x,
					y
				}
				this.contextIndex = index
			},
			// 双击事件
			dbClick(row) {
				var _this = this
				var fs = require('fs')
				var path = '/' + this.path.join("/");
				var stat = fs.lstatSync(path + '/' + row);
				var is_direc = stat.isDirectory(); // true || false 判断是不是文件夹
				console.log(is_direc)
				var filetxt = this.filetxt
				if (is_direc) {
					console.log(row)
					this.path.splice(this.path.length, 0, row);
					//进入子目录
					this.Refresh();
					console.log(this.path);
				} else {
					// 双击打开文件
					const cmdStr = path +'/'+ row;
					const workerProcess = exec(cmdStr, {
						encoding: "GBK"
					});
					
					exec(cmdStr, (err, stdout, stderr) => {
					  if (err) {
					    console.error(err);
					    return;
					  }
					  console.log(stdout);
					});
				}

			},
			YesFolder() {
				const fs = require('fs')
				const value = this.FolderValue
				const path = '/' + this.path.join("/");
				fs.mkdir(path + '/' + value, function(err) {
					// 如果有错 抛出错误
					if (err) {
						throw err;
					}
				})
				this.Refresh()
				this.$Message.success("新建" + value + "成功！！！");
			},
			// 删除本地文件
			deleted() {
				const fs = require('fs')
				const index = this.contextIndex
				const name = this.list[index]
				console.log(index)
				console.log(name)
				this.$Modal.confirm({
					title: '删除操作',
					content: '<p>请确认是否删除' + name + '</p><p>删除后无法恢复。</p>',
					onOk: () => {
						fs.unlink('/' + name, (err, data) => {
							if (err) {
								this.$Message.error("删除" + name + "失败！");
								return console.error(err)
							} else {
								console.log(data)
								this.$Message.success("删除" + name + "成功");
								this.Refresh()
							}
						})
					},
					onCancel: () => {
						this.$Message.info('Clicked cancel');
					}
				});
			},
			// 重命名文件夹
			NewFile() {
				const fs = require('fs')
				const index = this.contextIndex
				const name = this.list[index]
			},
			// 返回上一层
			Back() {
				//判断是否为根目录
				if (this.path.length == 0) {
					this.$router.push("/Hello");
				}
				//当前目录-1
				this.path.splice(-1, 1);
				//刷新目录
				this.Refresh();
			},
		}
	}
</script>
<style>
	.ul-li {
		float: left;
		text-align: center;
		list-style: none;
		
		width: 100px;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.ul-li:hover{
	background-color: #e5f3ff
	} 
	
	#disk  ul  ul li  {
		height: 25px;
	}
</style>
